<template>
  <nav class="site-navbar" :class="'site-navbar--' + layoutSkin" >
    <div class="site-navbar__header" >
      <h1 class="site-navbar__brand">
        <img :src="logimgsrc" v-if="logimgsrc" alt="" style="padding-left: 7px;width: 50px;"/>
        <img src="/static/images/base/logo.png" v-else alt="" style="padding-left: 7px;width: 50px;"/>
        <span class="site-navbar__brand-lg">{{ systemName }}</span>
      </h1>
    </div>
    <div class="site-navbar__body">
      <div class="left"> </div>
      <div class="right">
          <!-- <div class="dropdown-item">
            <icon-svg  name="theme"></icon-svg>
            <el-dropdown trigger="hover"  @command="handleCommand">
              <span class="el-dropdown-link" style="cursor:pointer;">
                主题切换
                <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="light">浅色</el-dropdown-item>
                <el-dropdown-item command="dark">深色</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div> -->
          <div class="dropdown-item">
            <el-dropdown trigger="hover"  @command="userHandleCommand">
              <span class="el-dropdown-link" style="cursor:pointer;">
                <img src="/static/images/base/avatar.png" class="avatar" v-if="!avatar"/>
                <img :src="avatar" alt="" class="avatar" v-else />
                <span v-if="userInfo === null">admin</span>  
                <span v-else>{{ userInfo.username }}</span>
                <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <!-- <el-dropdown-item command="center">个人中心</el-dropdown-item>
                <el-dropdown-item command="desktop">系统桌面</el-dropdown-item> -->
                <el-dropdown-item command="logout">退出系统</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
      </div>
    </div>
      
  </nav>
</template>

<script>
// getMd5FilePath
// import { getUrlParams } from '@/utils/common';
import Vue from 'vue';
export default {
  data() {
    return {
      systemName: '', // '应急监测车载仪器智能管理系统',
      systemLogoSrc: '',
      flag: false,
      show: false,
      showContent: false,
      updatePassowrdVisible: false,
      showPopover: false,
      activeMenuid: '',
      // logo
      logimg: '',
      logimgsrc: '',
      // title icon
      icoimg: '',
      icoimgsrc: '',
      list: [
        { name: '浅色', id: 'light' },
        { name: '深色', id: 'dark' }
      ]
    };
  },
  created() {

  },
  components: {

  },
  watch: {
    logimg(val) {
      if (val) {
        this.getImage(val).then(res => {
          this.logimgsrc = res.filePathName;
        });
      }
    },
    icoimg(val) {
      if (val) {
        this.getImage(val).then(res => {
          this.icoimgsrc = res.filePathName;
          this.changeFavicon(this.icoimgsrc);
        });
      }
    }
  },
  computed: {
    userInfo() {
      return this.$store.state.user.userInfo;
    },
    // 头像地址
    avatar() {
      return this.$store.state.user.avatar;
    },
    topMenuList() {
      return this.$store.state.common.topMenuList;
    },
    layoutSkin: {
      get() { return this.$store.state.common.layoutSkin; },
      set(val) { this.$store.commit('common/updateLayoutSkin', val); }
    },
    topMenuaActiveIndex: {
      get() { return this.$store.state.common.topMenuaActiveIndex; },
      set(val) { this.$store.commit('common/updateTopMenuActiveIndex', val); }
    },
    navbarLayoutType: {
      get() { return this.$store.state.common.navbarLayoutType; }
    },
    sidebarFold: {
      get() { return this.$store.state.common.sidebarFold; },
      set(val) { this.$store.commit('common/updateSidebarFold', val); }
    },
    mainTabs: {
      get() { return this.$store.state.common.mainTabs; },
      set(val) { this.$store.commit('common/updateMainTabs', val); }
    },
    userName: {
      get() { return this.$store.state.user.name; }
    }
  },
  methods: {
    leave(e) {
      const parentP = document.querySelector('.topmenu');
      const loctionP = parentP.getBoundingClientRect();
      if (e.clientX < loctionP.left && e.clientY < 70) {
        this.showContent = false;
      } else if (e.clientX > loctionP.right && e.clientY < 70) {
        this.showContent = false;
      } else if (e.clientY < 0) {
        this.showContent = false;
      }
    },
    routeHandle(el) {
      const fullPath = this.$route.fullPath;
      if (fullPath === el.menuurl) {
        this.$router.push({ path: 'redirect' });
      } else {
        this.$router.push({ path: el.menuurl });
      }
    },
    userHandleCommand(command) {
      if (command === 'logout') {
        this.logoutHandle();
      } else if (command === 'desktop') {
        if (process.env.NODE_ENV === 'development') { // 开发环境
          window.location.href = '/system/index.html#/desktop';
        } else {
          window.location.href = '/web/system/index.html#/desktop';
        }
      } else {
        this.$router.push({
          path: '/personal-center'
        });
      }
    },
    handleCommand(command) {
      this.layoutSkin = command;
    },
    menuHandleSelect(key, keyPath) {
      if (key === '2-1') {
        this.logoutHandle();
      }
    },
    handleSelect(item) {
      console.log(item);
      this.activeMenuid = item.menuid;
      this.$store.commit('common/updateMenuList', item.children);
    },
    changeFavicon(link) {
      let $favicon = document.querySelector('link[rel="shortcut icon"]');
      console.log(`$favicon`, $favicon);
      // If a <link rel="icon"> element already exists,
      // change its href to the given link.
      if ($favicon !== null) {
        $favicon.href = link;
        // Otherwise, create a new element and append it to <head>.
      } else {
        $favicon = document.createElement('link');
        $favicon.rel = 'icon';
        $favicon.href = link;
        document.head.appendChild($favicon);
      }
    },
    // 退出
    logoutHandle() {
      this.$confirm(`确定退出系统?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const params = {
          url: '/api/logout',
          type: 'get',
          params: { }
        };
        this.$ajax(params).then(resp => {
          this.loading = false;
          const { success, message } = resp;
          if (success) {
            this.$message(message);
            window.localStorage.removeItem('vuex');
            Vue.cookie.delete('token');
            this.$router.push({ path: '/login' });
          }
        });
      }).catch(() => {});
    }
  }
};
</script>
<style lang="scss" scoped>
.site-navbar__brand{
  // background-image: url('/static/images/base/navbar-brand.png');
  background-repeat:no-repeat no-repeat;
  background-size: 100% 100%;
  padding: 0 50px 0 10px;
}
</style>
